<!--
 * @Author: Shususumu
 * @Date: 2020-10-15 15:57:45
 * @LastEditTime: 2020-10-16 10:12:55
 * @FilePath: \ej\src\views\product\index.vue
-->
<template>
  <div id="product">
    <div id="control">
      <el-button type="primary" size="small" @click="dialogFormVisible = true"
        >添加</el-button
      >&nbsp;
      <el-input
        placeholder="请输入查询的内容"
        v-model="input"
        class="input"
        clearable
        size="small"
      >
      </el-input>
      <el-button type="primary" size="small">查询</el-button>
    </div>

    <template>
      <el-table :data="products" style="width: 100%" height="500">
        <el-table-column fixed prop="id" label="编号" width="80">
        </el-table-column>
        <el-table-column label="图片" width="80">
          <!-- <img :src="item.photo" alt="" /> -->
        </el-table-column>
        <el-table-column fixed prop="name" label="产品名称" width="150">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
        </el-table-column>
        <el-table-column prop="description" label="产品描述"> </el-table-column>
        <el-table-column prop="categoryId" label="所属产品" width="80">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="dlt(scope.row, id)" type="text" size="small"
              >删除</el-button
            >
            <el-button
              @click="dialogFormVisible = true"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
    <el-dialog title="修改订单信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属栏目" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth"
          ><el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
          >
          </el-input
        ></el-form-item>
        <el-form-item label="上传图片" :label-width="formLabelWidth"
          ><el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload></el-form-item
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: [],
      input: "",
      textarea: "",
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "100px",
      fileList: [],
    };
  },
  created() {
    var pageobj = { page: 1, pageSize: 6 };
    this.$axios
      .post("/product/query", pageobj, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
      .then((res) => {
        // console.log(res);
      });
    this.$axios.get("/product/findAll").then((res) => {
      console.log(res);
      this.products = res.data.data;
    });
  },
  methods: {
    dlt() {
      this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
<style scoped>
#product {
  margin: 18px;
}
.input {
  width: 200px;
}
</style>